<script setup lang="ts">
import PropsType from "./components/01-PropsType.vue";
import EmitsType from "./components/02-EmitsType.vue";
import RefType from "./components/03-RefType.vue";
import ComputedType from "./components/04-ComputedType.vue";
import EventType from "./components/05-EventType.vue";
import ProvideInjectType from "./components/06-ProvideInjectType.vue";
import TemplateRefType from "./components/07-TemplateRefType.vue";

import { provide, inject } from "vue";
import { key } from "./types";

// provide(key, 123); // 这里会报错，因为 123 不是 string 类型
provide(key, "123");

function getChildData(data: string) {
  console.log("收到子组件传递的数据：", data);
}
</script>

<template>
  <PropsType foo="foo" :bar="true ? 1 : 2" :sendData="getChildData" />
  <EmitsType @myEvent="getChildData" />
  <RefType />
  <ComputedType />
  <EventType />
  <ProvideInjectType />
  <TemplateRefType />
</template>

<style scoped></style>
